<template>
	<!--pages/container/my-address-list/my-address-list.wxml-->
	<div class='container'>
		<nav-header ></nav-header>
		<div class='address-list'>

			<div class='address-item' v-for="(item,index) in addressList" :key="item.address_id">

				<div class='address-body' @click="selectAddress(item)" :data-address-id="item.address_id" >
					<span class='address-title'>{{item.address }}</span>
					<span class='addres-info'>{{item.area_info}}</span>
					<div class='linkman'>
						<span class='linkman-name'>{{item.true_name}}</span>
						<span class='linkman-phone'>{{item.mob_phone}}</span>
					</div>
				</div>

				<div class='edit-container'>
					<div class='set-default'>
						<span v-if="item.is_default == 1" class="icon icon-select"></span>
						<span v-else="" class="icon icon-no-select"></span>
						<span>默认地址</span>
					</div>
					<div class='edit-btn'>
						<div catchtap='navigateTo' @click='editAddress(item)' class='amend-btn'>
							<img src='../../../static/img/edit.png' />
							<span>修改</span>
						</div>
						<div class='amend-btn' @click='deleteAddress(item)' :ata-address-id='item.address_id'>
							<img src='../../../static/img/del.png' />
							<span>删除</span>
						</div>
					</div>
				</div>
			</div>

		</div>
		<router-link to="/addAddress/confirm" v-if='this.$route.params.page_from == "confirm"' class='go-add-btn'>
			<span>添加新地址</span>
		</router-link>
		<router-link to="/addAddress/address" v-else class='go-add-btn'>
			<span>添加新地址</span>
		</router-link>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import {mapGetters,mapState,mapActions} from 'vuex';
	export default {
		data() {
			return {
				pageFrom:""
			}
		},
		computed:{
            ...mapState(['addressList','shoppingSelectGoods'])
        },
		mounted() {
//			this.selectAddress()
		},
		created() {
			this.getAddressList({memberId: 101076})
		},
		methods: {
			...mapActions(['getAddressList','delAddress']),
			deleteAddress(detail){
				let _this = this;
				let paramas = {
					member_id:101076,
					address_id:detail.address_id
				};
				this.delAddress(paramas);
				this.$store.state.addressList.map(function(ele, index) {
					if(detail.address_id == ele.address_id) {
						_this.$store.state.addressList.splice(index, 1);
					}
				})
			},
			editAddress(data){
				this.$router.push("/editAddress");
				console.log(data)
				this.$store.state.editAddress = data;
			},
			selectAddress(selectAddressDetail){
				if(this.$route.params.page_from == "comfirm"){
					console.log(this.$route.params.page_from)
					this.shoppingSelectGoods.address_info = selectAddressDetail;
					this.$router.push("/comfirmOrderDetail")
				}
			}
		},
		components: {
			"nav-header": header,
		},


	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		overflow: hidden;
		margin: 90px 0 100px;
		.address-list {
			background-color: #F8F8F8;
			.address-item {
				padding: 0 40px;
				margin-bottom: 40px;
				background-color: #fff;
				.address-body {
					padding: 48px 0;
					border-bottom: 1px solid #E5E5E5;
					.address-title {
						display: block;
						margin-bottom: 16px;
						font-size: 36px;
						color: #4A4A4A;
					}
					.addres-info {
						display: block;
						font-size: 30px;
						color: #67666B;
						line-height: 42px;
						padding-bottom: 34px;
					}
					.linkman {
						display: flex;
						.linkman-name,
						.linkman-phone {
							font-size: 30px;
							color: #67666B;
						}
						.linkman-name {
							margin-right: 40px;
						}
					}
				}
				.edit-container {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 120px;
					.set-default {
						width: 40%;
						display: flex;
						.icon-no-select{
							display: inline-block;
							width: 36px;
							height: 40px;
							/*background-image: url("../../../static/img/fill_success.png");*/
						}
						.icon-select{
							display: inline-block;
							width: 36px;
							height: 40px;
							background-image: url("../../../static/img/fill_success.png");
						}
						span:nth-of-type(2) {
							color: #67666b;
							font-size: 30px;
							margin-left: 26px;
						}
					}
					.edit-btn {
						display: flex;
						justify-content: flex-end;
						width: 60%;
						.amend-btn {
							display: flex;
							align-items: center;
							margin-left: 60px;
							span {
								margin-left: 12px;
								color: #9b9b9b;
								font-size: 30px;
							}
							img {
								width: 32px;
								height: 32px;
							}
						}
					}
				}
			}
		}
	}
	
	.go-add-btn {
		display: block;
		width: 670px;
		height: 90px;
		margin: 40px auto;
		text-align: center;
		line-height: 90px;
		background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
		box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
		border-radius: 8px;
		span{
			vertical-align: top;
			color: #fff;
  			font-size: 36px;
  			display: inline-block;
  			line-height: 90px;
		}
	}
</style>